<template>
    <div class="container">
        <a-table style="width:90%;margin:0 auto;margin-top:5vh;" :pagination="false" :columns="columns"
            :dataSource="list" bordered :rowKey="record => record.id">
            <template slot="ctime" slot-scope="text">
                <span>{{text.ctime | timeFilter}}</span>
            </template>
            <template slot="memberName" slot-scope="record">
                <a-tooltip>
                    <template slot="title">
                        {{record.memberName}}
                    </template>
                    <span>{{record.memberName | nameListFilter}}</span>
                </a-tooltip>
            </template>
            <template slot="amount" slot-scope="record">
                <span>{{record.amount | amountFilter}}</span>
            </template>
            <template slot="status" slot-scope="record">
                <!-- <span v-if='record.status == "0"'>成功</span>
                <span v-else-if='record.status == "1"'>失败</span> -->
                <span>{{record.status}}</span>
            </template>
        </a-table>
    </div>
</template>


<script>
    const columns = [
        {
            title: '分账单号',
            dataIndex: 'transOrderNo',
            align: 'center'
        },
        {
            title: '分账日期',
            dataIndex: 'transDate',
            align: 'center'
        },
        {
            title: '分账时间',
            scopedSlots: { customRender: 'ctime' },
            align: 'center'
        },
        {
            title: '分账对象',
            scopedSlots: { customRender: 'memberName' },
            align: 'center'
        },
        {
            title: '分账金额（元）',
            scopedSlots: { customRender: 'amount' },
            align: 'center'
        },
        {
            title: '分账结果',
            scopedSlots: { customRender: 'status' },
            align: 'center'
        },
    ];

    import { message } from "ant-design-vue";
    import api from "@/common/api";
    import { mapState } from "vuex";
    export default {
        name: "newReceipt",
        data() {
            return {
                columns,
                list:[]
            };
        },
        filters: {
            nameListFilter(value) {
                if (value.length > 16) {
                    return value.substring(0, 16) + '...'
                }
                return value

            },
            timeFilter(value){
                return value.split(' ')[1]
            },
            amountFilter(value){
                return (value * 100 / 10000 ).toFixed(2)
            }
        },
        computed: {
            ...mapState({
                imageSize: state => state.imageSize
            })
        },
        created() {
        },
        mounted() {
            console.log(this.$route.params.id)
            this.getDetail()
        },
        activated() {
            this.getDetail()
        },
        watch: {
            //  function tabchange(params) {
            //  }
        },
        methods: {

            getListDivHeight() {
                let aaa = setTimeout(function () {
                    let listDiv = document.getElementById("listDiv");
                    console.log(listDiv.offsetHeight);
                    console.log(listDiv.clientHeight);
                    let H = (document.body.clientHeight * 100 / 10000) * 65;
                    console.log(H)
                    if (listDiv.offsetHeight > H) {
                        listDiv.style.height = "65vh";
                    }
                }, 10);
            },
            getDetail() {
                let data = {
                    "data": {
                        "inOrderNo": this.$route.params.id
                    },
                    "page": 1,
                    "pageSize": 10
                }
                api.ReceiptCheckDetail(data, res => {
                    if (res.code == 'OK') {
                        this.list = res.list;
                    }
                }, err => {

                })
            },
            goModify() {
                this.$router.push({ path: '/newReceipt', query: { modify: 'true' } })
            }
        }
    };
</script>

<style lang="less" scoped>
    .container {
        padding: 40px;
    }

    tr .column-money,
    tr .column-money {
        text-align: right !important;
    }

    #listDiv {
        overflow-y: auto;
    }

    /*滚动条样式*/
    #listDiv::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 4px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 4px;
    }

    #listDiv::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: rgba(0, 0, 0, 0.2);
    }

    #listDiv::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .listDiv:nth-child(even) {
        background: #eee;
    }
    /deep/.ant-table-thead>tr>th> {
        color: #52506b;
    }
</style>